<template>
  <view class="product">
    <view
      class="product-content"
      @click="$emit('click')"
    >
      <v-image
        height="190rpx"
        width="190rpx"
        border-radius="16rpx"
        :src="product.sku_image"
        mode="aspectFill"
      />
      <view class="product-info">
        <view class="main-info">
          <view class="name">
            {{ product.spu_name }}
          </view>
          <view class="price">
            <v-price
              size="32rpx"
              color="#333333"
              :price="product.sell_price"
            />
          </view>
        </view>
        <view class="sub-info">
          <view class="spec-info">
            {{ product.sku?.spec_info?.map((item) => item.value).join('; ') }}
          </view>
          <view class="quantity">
            {{ product.quantity ? `x${product.quantity}` : '' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps<{
  product: OrderDetailVO;
}>();

defineEmits<{
  click: [];
  'apply-aftersales': [];
  'apply-comments': [];
}>();

const product = toRef(props, 'product');
</script>

<style lang="scss" scoped>
.product {
  .product-content {
    display: flex;
    align-items: stretch;
    gap: 24rpx;
    .product-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      .main-info {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        gap: 8rpx;
        .name {
          font-weight: bold;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          width: fit-content;
          flex-shrink: 0;
        }
      }
      .sub-info {
        display: flex;
        align-items: flex-start;
        gap: 8rpx;
        .spec-info {
          flex: 1;
          font-size: 24rpx;
          line-height: 32rpx;
          color: #666666;
        }
        .quantity {
          flex-shrink: 0;
          line-height: 32rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>
